/**
*@author weixiaodi
*@date 2019/10/21
*/
<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-tickets"></i>
                    <span style="margin-left: 10px">工作信息</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="margin: 20px;"></div>

        <div class="container" >
            <div class="sign">
                <el-button
                        type="primary"
                        icon="el-icon-document-checked"
                        @click="sign"
                        :disabled="isRegist">签到
                </el-button>

                <el-button
                        type="warning"
                        icon="el-icon-document-delete"
                        @click="dialogFormVisible = true"
                        :disabled="isLeave">请假
                </el-button>

                <el-button
                        type="success"
                        icon="el-icon-document-delete"
                        @click="dialogVisible = true"
                        :disabled="false">今日工作内容
                </el-button>

                <el-dialog
                        title="请假"
                        :visible.sync="dialogFormVisible"
                        width="600px"
                        :before-close="handleClose">
                    <el-form :model="form">
                        <el-form-item label="请假时间" :label-width="formLabelWidth">
                            <el-select v-model="form.leavedate" placeholder="请选择请假天数">
                                <el-option label="1天" value="1"></el-option>
                                <el-option label="2天" value="2"></el-option>
                                <el-option label="3天" value="3"></el-option>
                                <el-option label="4天" value="4"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="请假原因" :label-width="formLabelWidth" >
                            <el-input type="textarea" v-model="form.reason" style="width: 400px"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="leave">确 定</el-button>
                    </div>
                </el-dialog>

                <el-dialog
                        title="今日工作内容"
                        :visible.sync="dialogVisible"
                        width="30%">
                    <div class="texttcenter">{{jobData}}</div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
            </div>


        <el-table
                :data="tableData.filter(data => !search || data.userName.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%"
                ref="filterTable">
            <el-table-column
                    align="center"
                    label="日期">
                <template slot-scope="scope">
                    <div>{{ scope.row.regist === true ? scope.row.rtime : scope.row.ltime }}</div>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="姓名">
                <template slot-scope="scope">
                    <div>{{ scope.row.userName }}</div>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="工作状态"
                    :filters="[{ text: '到岗', value: 1 }, { text: '请假', value: 2 },  { text: '请假驳回', value: 3}]"
                    :filter-method="filterTag"
                    filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag size="medium" :type="scope.row.regist === true ? 'primary' :
                    scope.row.regist === false && scope.row.leave === true ? 'warning' : 'danger'">
                        {{ scope.row.regist === true ? '到岗' :
                        scope.row.regist === false && scope.row.leave === true ? '请假' : '请假驳回' }}</el-tag>
                </template>
            </el-table-column>
<!--            <el-table-column
                    align="center"
                    label="工作内容"
                    prop="job">
            </el-table-column>-->
            <el-table-column
                    align="center"
                    label="请假原因"
                    prop="reason">
            </el-table-column>
            <el-table-column
                align="right">
            <template slot="header" slot-scope="scope">
                <el-input
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"/>
            </template>
            <!--                <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                            </template>-->
        </el-table-column>
        </el-table>

        </div>
    </div>
</template>

<script>
    import { requestGetJobById, requestLeave, requestManage, requestSign } from '../../../api';
    export default {
        data() {
            return {
                type:'',
                tableData: [],
                jobData:[],
                userInfoData:[],
                search: '',
                dialogFormVisible: false,
                dialogVisible: false,
                form: {
                    leavedate:'',
                    reason:'',
                },
                res:'',
                formLabelWidth: '120px',
                id:"",
                userName:"",
            }
        },
        created(){
            this.id=this.$store.state.user.id;
            this.userName=this.$store.state.user.userName;
            this.getRegistInfo()
            this.getJobInfo()
        },
        computed:{
            //检测当天是否签到
            isRegist(){
                let st = new Date(new Date().setHours(0, 0, 0, 0)).getTime()/1000  //当天0点的时间戳
                if(this.tableData.filter((item)=>parseInt(item.registTime) >= parseInt(st)).length===1){
                    return true
                }else{
                    return false
                }
            },
            //检测当天是否请假
            isLeave(){
                let st = new Date(new Date().setHours(0, 0, 0, 0)).getTime()/1000  //当天0点的时间戳
                //console.log(this.tableData.filter((item)=>parseInt(item.leaveTime) >= parseInt(st)))
                if(this.tableData.filter((item)=>parseInt(item.leaveTime) >= parseInt(st)).length >= 1){
                    return true
                }else {
                    return false
                }
            }
        },
        methods: {
            //获取自己的考勤信息
            async getRegistInfo(){
                let json ={
                    id:this.id
                }
                //console.log(this.id)
                const res = await requestManage(json).catch(()=>"error")
                if("error"!==res){
                    console.log(res)
                    this.tableData = res.map((item)=>{
                        let registTime = item.registTime;
                        let leaveTime = item.leaveTime;
                        registTime = this.getSecondTime(registTime);
                        leaveTime = this.getDateTime(leaveTime);
                        item["rtime"] = registTime;
                        item["ltime"] = leaveTime;
                        return item;
                    });
                }
            },
            //获取工作信息
            async getJobInfo(){
                let json ={
                    id:this.id
                }
                const res = await requestGetJobById(json).catch(()=>"error")
                if("error"!==res){
                    this.jobData = res
                }
            },
            //筛选工作状态标签
            filterTag(value, row) {
                //console.log(value, row.leave);
                if(value === 1)
                    { return row.regist === true && row.leave === false;}
                else if(value === 2)
                    {return row.regist === false && row.leave === true;}
                else
                { return row.regist === false && row.leave === false;}
            },

            /*写入签到数据*/
            async sign(){
                let registTime = parseInt(new Date().getTime()/1000)
                let json={
                    id:this.id,
                    userName:this.userName,
                    regist:1,
                    registTime:registTime,
                    leave:0,
                }
                const  res = await requestSign(json).catch(()=>{
                    console.log("输入失败");
                    return "error";
                });
                if (res !== "error") {
                    this.$message.success("签到成功！")
                } else {
                    this.$message.error("签到失败！")
                }
                this.getRegistInfo();
            },

            /*写入请假数据*/
            async leave(){
                this.dialogFormVisible = false
                //获取当前时间戳
                let leaveTime = parseInt(new Date().getTime()/1000)
                for(let i = 0; i < this.form.leavedate; i++){
                    let json={
                        id:this.id,
                        userName:this.userName,
                        regist:0,
                        leaveTime:leaveTime+24*60*60*i,
                        leave:1,
                        reason:this.form.reason
                    };
                      this.res = await requestLeave(json).catch(() => {
                        console.log("输入失败");
                        return "error";
                    });
                }
                if (this.res !== "error") {
                    this.$message.success("请假成功！")
                } else {
                    this.$message.error("请假失败！")
                }
                this.getRegistInfo();

            },


            /*获取manageinfo表所有人员中数据*/
/*            async check(){
                const res = await requestManage().catch(()=>'error')
                if("error"!==res){
                    //console.log(res)
                    this.tableData = res.map((item)=>{
                        let registTime = item.registTime;
                        let leaveTime = item.leaveTime;
                        registTime = this.getSecondTime(registTime);
                        leaveTime = this.getDateTime(leaveTime);
                        item["rtime"] = registTime;
                        item["ltime"] = leaveTime;
                        return item;
                    });
                }
            },*/

            /*将时间戳转换为标准格式，到秒*/
            getSecondTime(nS) {
                var d = new Date(parseInt(nS)*1000);    //根据时间戳生成的时间对象
                var date = (d.getFullYear()) + "-" +
                    ((d.getMonth() + 1) >= 10 ? (d.getMonth() + 1) : '0' + (d.getMonth() + 1)) +
                    '-' +
                    ((d.getDate()) < 10 ? '0' + d.getDate() : d.getDate()) +
                    ' ' +
                    ((d.getHours()) < 10 ? '0' + d.getHours() : d.getHours()) +
                    ':' +
                    ((d.getMinutes()) < 10 ? '0' + d.getMinutes() : d.getMinutes()) +
                    ':' +
                    ((d.getSeconds()) < 10 ? '0' + d.getSeconds() : d.getSeconds());
                return date;
            },
            /*将时间戳转换为标准格式，到日*/
            getDateTime(nS) {
                var d = new Date(parseInt(nS)*1000);    //根据时间戳生成的时间对象
                var date = (d.getFullYear()) + "-" +
                    ((d.getMonth()) >= 10 ? (d.getMonth() + 1) : '0' + (d.getMonth() + 1)) +
                    '-' +
                    ((d.getDate()) < 10 ? '0' + d.getDate() : d.getDate());
                return date;
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            }
        },

    }
</script>

<style scoped>
    .sign {
        margin-bottom: 20px;
        float:left;
    }
    .border{
        border-width: 0;
    }
    .texttcenter{
        text-align: center;
        font-size: 23px;
    }

</style>